<template>
  <a-modal
    title="查看"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="deviceInfoInfoVisiable"
  >
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="设备编号"
                       v-bind="formItemLayout">
            <a-input v-decorator="['deviceNo']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="设备类型"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              :disabled="true"
              v-decorator="['deviceType',{rules: [{ required: true, message: '必填' }]}]">
              <a-select-option key="1">终端机具</a-select-option>
              <a-select-option key="2">终端部件</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端厂商"
                       v-bind="formItemLayout">
            <a-select
              show-search
              placeholder="请输入代码或名称"
              option-filter-prop="children"
              style="width: 100%"
              :allowClear="true"
              :filter-option="filterOption"
              @focus="selectBrandCode"
              :disabled="true"
              v-decorator="['brandCode',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="(d,index) in brandCodeData" :key="d.brandCode">
                {{ d.brandCode }}-{{ d.brandName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端型号"
                       v-bind="formItemLayout">
            <a-select
              show-search
              placeholder="请输入代码或名称"
              option-filter-prop="children"
              style="width: 100%"
              :allowClear="true"
              :filter-option="filterOption"
              @focus="selectByBrandCode"
              :disabled="true"
              v-decorator="['modelCode',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="(d,index) in modelCodeData" :key="d.modelCode">
                {{ d.modelCode }}-{{ d.modelName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="S/N号"
                       v-bind="formItemLayout">
            <a-input  placeholder="最长64位数字、字母"
                      v-decorator="['sn',{rules: [{ required: true, message: '必填字段'}]}]" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="入库方式"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              :disabled="true"
              v-decorator="['libraryType',{rules: [{ required: true, message: '必填字段'}]}]">
              <a-select-option key="01">手动</a-select-option>
              <a-select-option key="02">批量</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="入库批次号"
                       v-bind="formItemLayout">
            <a-input  placeholder="最长64位数字、字母"
                      v-decorator="['libraryBatch',{rules: [{ required: true, message: '必填字段'}]}]" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="有效期日期"
                       v-bind="formItemLayout">
            <a-range-picker
              format="YYYYMMDD" v-decorator="['effectiveDate',{rules: [{ required: true, message: '必填字段'}]}]" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="联系人姓名"
                       v-bind="formItemLayout">
            <a-input  placeholder="最长32位汉字、字母和数字" v-decorator="['contactName']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="联系电话"
                       v-bind="formItemLayout">
            <a-input  placeholder="最长11位数字" v-decorator="['contactPhone']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="联系人电子邮箱"
                       v-bind="formItemLayout">
            <a-input  placeholder="最长128位字符、字母和数字" v-decorator="['contactEmail']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="联系地址"
                       v-bind="formItemLayout">
            <a-textarea allow-clear  placeholder="最长128位字符、字母和汉字" v-decorator="['contactAddr']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="设备描述"
                       v-bind="formItemLayout">
            <a-textarea  placeholder="最长128位字符、字母和汉字"
                         v-decorator="['deviceDesc',{rules: [{ required: true, message: '必填' }]}]" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="设备购置方式"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              :disabled="true"
              v-decorator="['devicePurchType',{rules: [{ required: true, message: '必填' }]}]">
              <a-select-option key="00">自有</a-select-option>
              <a-select-option key="01">租用</a-select-option>
              <a-select-option key="02">第三方所有</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="设备单价（元）"
                       v-bind="formItemLayout">
            <a-textarea  placeholder="最长20数字、字符"
                         v-decorator="['devicePrice',{rules: [{ required: true, message: '必填' }]}]" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="设备状态"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              :disabled="true"
              v-decorator="['status',{rules: [{ required: true, message: '必填' }]}]">
              <a-select-option key="10">未使用</a-select-option>
              <a-select-option key="11">已使用</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="租赁商户编码"
                       v-bind="formItemLayout">
            <a-input v-decorator="['mchntNo']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="关联虚拟终端编号"
                       v-bind="formItemLayout">
            <a-input allow-clear  placeholder="最长20位数字、字母" v-decorator="['termNo']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="租赁日期"
                       v-bind="formItemLayout">
            <a-range-picker
              format="YYYYMMDD" v-decorator="['leaseDate']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="租赁费用(元/日)"
                       v-bind="formItemLayout">
            <a-input placeholder="最长20数字、字符" v-decorator="['deviceLeasePrice']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="押金(元)"
                       v-bind="formItemLayout">
            <a-input :disabled="true" placeholder="最长20数字、字符" v-decorator="['cashPledge']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <br>

    </a-form>
  </a-modal>
</template>
<script>
  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16}
  }
  export default {
    name: 'deviceInfoInfo',
    props: {
      deviceInfoInfoVisiable: {
        default: false
      },
      instId: '',
    },
    data() {
      return {
        brandCodeData: [],
        modelCodeData: [],
        loading: false,
        msgPushKeyShow: false,
        bindUserIdShow: false,
        formItemLayout,
        form: this.$form.createForm(this),
        validateStatus: '',
        // firstValue: {},
        info: {
          infoName: '',
          remark: '',
          menuId: ''
        }
      }
    },
    computed: {
      show: {
        get: function () {
          return this.deviceInfoInfoVisiable
        },
        set: function () {
        }
      }
    },
    mounted() {

    },

    methods: {
      selectBrandCode() {
        this.brandCodeData = []
        this.$get('terminalAdmin/getBrandCode', {instId: this.instId}).then((r) => {
          let result = r.data
          // console.log(result)
          result.forEach(r => {
            this.brandCodeData.push(r);
          })
        })
      },

      selectByBrandCode() {
        this.modelCodeData = []
        let brandCode = this.form.getFieldsValue(['brandCode'])
        // console.log(brandCode)
        if (brandCode.brandCode) {
          this.$get('modelAdmin/getModelCode', brandCode).then((r) => {
            let result = r.data
            result.forEach(r => {
              this.modelCodeData.push(r);
            })
          })
        }else {
          this.$message.warning('请先选择终端产商')
        }
      },

      getMoment(value){
        return this.$moment(value).format('YYYYMMDD')
      },

      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },

      reset() {
        this.loading = false
        this.form.resetFields()
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },

      setInfoFields() {
        let values = this.form.getFieldsValue(['deviceNo', 'deviceType', 'brandCode', 'modelCode', 'sn', 'libraryType',
          'libraryBatch', 'effectiveDate', 'contactName', 'contactPhone', 'contactEmail', 'contactAddr', 'deviceDesc',
          'status','devicePurchType', 'devicePrice', 'mchntNo', 'termNo', 'leaseDate', 'deviceLeasePrice', 'cashPledge'])
        if (typeof values !== 'undefined') {
          Object.keys(values).forEach(_key => {
            this.info[_key] = values[_key]
          })
        }
      },

      setDeviceInfoFormValues ({...info}) {
        let fields = ['deviceNo', 'deviceType', 'brandCode', 'modelCode', 'sn', 'libraryType', 'libraryBatch',
          'effectiveDate', 'contactName', 'contactPhone', 'contactEmail', 'contactAddr', 'deviceDesc', 'status',
          'devicePurchType', 'devicePrice', 'mchntNo', 'termNo', 'leaseDate', 'deviceLeasePrice', 'cashPledge']

        Object.keys(info).forEach((key) => {
          if (fields.indexOf(key) !== -1) {
            this.form.getFieldDecorator(key)
            let obj = {}
            obj[key] = info[key]
            this.form.setFieldsValue(obj)
          }
        })
      },



    }

  }
</script>


